<template>
	<view class="container">
		<!-- 支付成功 -->
		<view class="col header">
			<image class="bg" :src="url+'/static/imgs/pay-result-bg.png'"></image>
			<view class="col header-main">
				<view class="success-title">支付成功</view>
				<view class="success-subtitle subtitle-top">实际付款<text>{{orderResult.order_info.order_pay_price}}</text>元</view>
				<view class="row user-info" v-if="orderResult.order_info.reduce_id">
					<!-- <view class="col">
						<image :src="url+'/static/imgs/temp/goods-1.png'"></image>
						<text class="text-ellipsis">{{orderResult.reduce_nickname||''}}</text>
					</view> -->
					<view class="success-subtitle">{{orderResult.reduce_nickname||''}}为您支付<text>{{orderResult.order_info.reduce_price}}</text>元</view>
				</view>
			</view>
			<view class="col say-view" v-if="orderResult.order_info.reduce_id">
				<text>他想说：</text>
				<text>{{orderResult.order_info.reduce_remark}}</text>
			</view>
		</view>
		<!-- 现金红包 -->
		<view class="row coupon-title font-orange" v-if="orderResult.coupon_info!=null">恭喜您，获得一张店面优惠券</view>
		<view class="red-packet margin" v-if="orderResult.coupon_info!=null">
			<view class="red-packet-header">
				<image :src="url+'/static/imgs/red-packet.png'" class="bg"></image>
				<view class="col tips-text">
					<text>{{orderResult.coupon_info.coupon_info.name}}</text>
					<text>（{{orderResult.coupon_info.coupon_info.money}}元优惠券已入账，下次可用）</text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="row button-view">
			<view class="back" @click="toHome">返回首页</view>
			<view class="continue" @click="toCategory">继续点餐</view>
		</view>
	</view>
</template>
<script>
	var app = getApp();
	import http from "../../../../common/js/request.js";
	export default {
		data() {
			return {
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				orderResult: {}
			}
		},
		onLoad(options) {
			var that = this;
			http.post('/api/v1/order/buy_step3', {
				order_id: options.order_id,
				store_id: that.store_id
			}, res => {
				that.orderResult = res.datas;
			});
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: '/pages/store/home/home'
				});
			},
			toCategory() {
				uni.switchTab({
					url: '/pages/store/category/category'
				});
			},
		}
	}
</script>
<style>
	.header {
		position: relative;
	}

	.header-main {
		width: 100%;
		position: absolute;
		top: 0;
		align-items: center;
		justify-content: center;
	}

	.success-title {
		margin: 20rpx 0rpx;
		font-size: 60rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-shadow: 0rpx 7rpx 13rpx rgba(151, 107, 30, 0.36);
	}

	.subtitle-top {
		margin-top: 20rpx;
	}

	.success-subtitle text {
		font-size: 36rpx;
		color: #FF0000;
	}

	.success-subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
		text-shadow: 0rpx 7rpx 13rpx rgba(151, 107, 30, 0.36);
	}

	.user-info,
	.user-info .col {
		align-items: center;
		justify-content: center;
	}

	.user-info {
		position: relative;
		height: 148rpx;
	}

	.user-info .col {
		position: absolute;
		color: #fff;
		font-size: 28rpx;
		top: 20rpx;
		left: -150rpx;
	}

	.user-info .col text {
		margin-top: 6rpx;
	}

	.user-info image {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
	}

	.say-view {
		margin: 0 auto;
		font-size: 30rpx;
		color: #F19C22;
	}

	.say-view text:nth-child(2) {
		margin-top: 12rpx;
	}

	.coupon-title {
		margin-top: 148rpx;
		height: 64rpx;
		align-items: center;
		justify-content: center;
	}

	.font-orange {
		font-size: 32rpx;
		color: #FF9D11;
	}

	.header .bg {
		width: 100%;
		height: 410rpx;
	}

	/* 红包 */
	.red-packet-header {
		width: 100%;
		height: 238rpx;
		padding: 20rpx 0rpx;
		position: relative;
	}

	.red-packet-header .bg {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
		/* box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2); */
	}

	.red-packet-header .tips-text {
		position: absolute;
		top: 58rpx;
		left: 200rpx;
		align-items: center;
	}

	.red-packet-header .tips-text text {
		color: #fff;
		font-size: 28rpx;
	}

	.red-packet-header .tips-text text:nth-child(2) {
		margin-top: 18rpx;
	}

	/* 底部按钮 */
	.button-view {
		height: 80rpx;
		align-items: center;
		margin: 40rpx 70rpx;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.button-view view {
		height: 100%;
		padding: 0rpx 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back {
		border-radius: 10rpx;
		border: 2rpx solid #9B9B9B;
		color: #333333;
	}

	.continue {
		border-radius: 10rpx;
		border: 2rpx solid #FF9D11;
		color: #FFFFFF;
		background: #FF9D11;
	}
</style>
